<template>
  <div>
    <!--  #####################查询条件###################  -->
    <div class='table-page-search-wrapper'>
      <a-form layout='inline'>
        <a-row :gutter='48'>
          <a-col :md='8' :sm='24'>
            <a-form-item label='商户名称'>
              <a-input v-model='queryParam.merchantName' placeholder='' />
            </a-form-item>
          </a-col>
          <a-col :md='!advanced && 8 || 24' :sm='24'>
            <span class='table-page-search-submitButtons'
                  :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
              <a-button v-action:query type='primary' @click='$refs.table.refresh(true)'>查询</a-button>
              <a-button style='margin-left: 8px' @click='clearData()'>重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!--  #####################查询条件###################  -->

    <!--  #####################操作###################  -->
    <div class='table-operator'>
      <a-button v-action:add type='primary' icon='plus' @click="handleEdit('null')">新建</a-button>
      <span style='font-size:16px; color:red;'>本页面做了缓存，新增或者编辑之后请查询一次</span>
    </div>
    <!--  #####################操作###################  -->

    <!--  #####################表格###################  -->
    <s-table ref='table' :columns='columns' :data='loadData'>
      <span slot='logo' slot-scope='text, record'>
        <img :src='text' alt='' style='max-width: 150px'>
      </span>
      <span slot='productName' slot-scope='text, record'>
          <a @click='handleOrder(record)'>{{ text }}</a>
        </span>
<!--      <a-tag slot='status' slot-scope='text' :color='text | statusColorFilter'>-->
<!--        {{ text | statusFilter }}-->
<!--      </a-tag>-->
      <a-tag slot='type' slot-scope='text, record' :color='text | typeColorFilter'>
        {{ text | typeFilter }}
      </a-tag>
      <span slot='status' slot-scope='status,record'>
          <a-switch checked-children='启用' un-checked-children='禁用' :checked='status' @change='statusBtn(record.id)'
                    :loading='loading' />
        </span>
      <span slot='action' slot-scope='text, record'>
        <template>
          <a v-action:delete @click="createdQr(record)">h5二维码</a>
          <a-divider v-action:edit type='vertical' />
          <a v-action:edit @click='handleEdit(record)'>编辑</a>
          <a-divider v-action:edit type='vertical' />
          <a v-action:edit @click='handleDel(record)'>删除</a>
<!--          <a-dropdown>-->
<!--            <a class='ant-dropdown-link'>-->
<!--              更多<a-icon type='down' />-->
<!--            </a>-->
<!--            <a-menu slot='overlay'>-->
<!--              <a-menu-item v-action:query>-->
<!--                <a v-action:edit @click='handlePic(record)'>明细图配置</a>-->
<!--              </a-menu-item>-->
<!--              <a-menu-item v-action:query>-->
<!--                <a v-action:delete @click='handleDel(record)'>删除</a>-->
<!--              </a-menu-item>-->
<!--            </a-menu>-->
<!--          </a-dropdown>-->
        </template>
      </span>
    </s-table>
    <!--  #####################表格###################  -->

    <!--  #####################打开的页面###################  -->
    <a-modal
      title="二维码"
      v-model="visible"
      :maskClosable="false"
      footer=""
    >
      <div id="qrcode" ref="qrcode" style="margin-left: 25%"></div>
    </a-modal>
    <!--  #####################打开的页面###################  -->
  </div>
</template>

<script>
import { STable } from '@/components'
import { selectPage, del, statusBtn } from '@/api/system/merchant'
import QRCode from 'qrcodejs2'

/**
 * 组件
 */
const components = { STable }

const columns = [
  {
    title: '商户logo',
    dataIndex: 'logo',
    scopedSlots: { customRender: 'logo' },
    width: 150
  },
  {
    title: '商户名称',
    dataIndex: 'merchantName',
    width: 160,
    ellipsis: true
  },
  {
    title: '商户联系电话',
    dataIndex: 'phone',
    ellipsis: true
  },
  {
    title: '商户id',
    dataIndex: 'mchUid',
    ellipsis: true
  },
  {
    title: '商户的应用id',
    dataIndex: 'appId',
    ellipsis: true
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 150,
    scopedSlots: {
      customRender: 'action'
    }
  }
]

const typeMap = {
  1: {
    status: '',
    text: '免费代金券'
  },
  2: {
    status: '#87d068',
    text: '收费代金券'
  },
  3: {
    status: '#2db7f5',
    text: '积分代金券'
  },
  4: {
    status: '#F577C2',
    text: '谢谢惠顾券'
  },
  5: {
    status: '#2728f5',
    text: '预约商品'
  }
}
const statusMap = {
  1: {
    status: '#f50',
    text: '下架'
  },
  2: {
    status: '#108ee9',
    text: '上架'
  }
}

/**
 * 数据
 */
const data = function() {
  return {
    visible: false,
    // 高级搜索 展开/关闭
    advanced: false,
    // 查询参数
    queryParam: {},
    columns,
    loading: false,
    editProps: [],
    customers: [],
    storeCode: null,

    // 加载数据方法 必须为 Promise 对象
    loadData: parameter => {
      //this.queryParam.stockType = 'merNORMAL'
      this.queryParam.types = 1
      return selectPage(Object.assign(parameter, this.queryParam, { storeCode: this.storeCode })).then(res => {
        return res.data
      })
    }
  }
}

const created = function() {
  // optionselect().then(res => {
  //   if (res.code === 200) {
  //     this.editProps = res.data
  //   }
  // })
  // storeList().then(res => {
  //   if (res.code === 200) {
  //     this.customers = res.data
  //   }
  // })
}

/**
 * 过滤器
 */
const filters = {
  statusFilter(status) {
    return statusMap[status].text
  },
  statusColorFilter(status) {
    return statusMap[status].status
  },
  typeFilter(type) {
    return typeMap[type].text
  },
  typeColorFilter(type) {
    return typeMap[type].status
  }
}

/**
 * 计算属性
 */
const computed = {}

/**
 * 侦听器
 */
const watch = {}

export default {
  name: 'merchantList',
  data: data,
  components: components,
  created: created,
  filters: filters,
  computed: computed,
  watch: watch,
  /**
   * 方法
   */
  methods: {
    createdQr(record) {
      this.visible = true
      this.$nextTick(function() {
        this.qrcode(record)
      })
      if (document.getElementById('qrcode') != null) {
        document.getElementById('qrcode').innerHTML = ''
      }
    },
    qrcode(record) {
      let qrcode = new QRCode('qrcode', {
        width: 232,  // 设置宽度
        height: 232, // 设置高度
        text: record.authUrl
      })
    },
    //联动选择商户
    handleProvinceChange(value) {
      this.storeCode = ''
      const params = { 'merchantCode': value }
      optionselect(params).then(res => {
        if (res.code === 200) {
          this.editProps = res.data
        }
      })
    },
    handleEdit(record) {
      //console.log('123')
      this.$emit('onEdit', record)
    },
    handleOrder(record) {
      this.$router.push({
        name: 'couponOrderInfo',
        params: { productNo: record.productNo, stockType: record.stockType }
      })
    },
    handlePic(record) {
      this.$router.push({ path: '/product/productDetail', query: {masterId: record.id} })
    },
    updateStatus(id) {
      updateStatus(id).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功！')
          //刷新页面
          this.$refs.table.refresh()
        }
      })
    },
    handleDel(record) {
      const _this = this
      this.$confirm({
        title: '警告',
        content: `真的要删除 ${record.merchantName} 吗?`,
        okText: '删除',
        okType: 'danger',
        cancelText: '取消',
        onOk() {
          // 在这里调用删除接口
          del(record.id).then(res => {
            if (res.code === 200) {
              _this.$message.success(res.message)
              _this.$refs.table.refresh()
            }
            if (res.code === 500) {
              _this.$message.error(res.message)
            }
          })
        }
      })
    },
    handleOk() {
      this.$refs.table.refresh()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date())
      }
    },
    statusBtn(id) {
      const that = this
      that.loading = true
      statusBtn(id).then(res => {
        that.loading = false
        if (res.code === 200) {
          that.$refs.table.refresh()
        }
      })
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    clearData() {
      this.queryParam = {}
      this.storeCode = null
    }
  }
}
</script>
